<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.css">
  <link rel="stylesheet" href="./css/index.css">
  <!-- 引入内容动画插件css -->
  <link rel="stylesheet" href="./lib/animate.css">
  <!-- 引入ico图标 -->
  <link rel="shortcut icon" href="./images/MaiZi.ico" type="image/x-icon">
  <title>麦子学院</title>
</head>
<body>
  <!-- 导航 -->
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <!-- 小屏幕导航按钮和logo -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" 
          data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 
          aria-expanded="false">
          <span class="sr-only">切换菜单</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="index.html">麦子学院</a>
      </div>
      <!-- 导航 -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#home">首页</a></li>
          <li><a href="#bbs">论坛</a></li>
          <li><a href="#html5">前端开发</a></li>
          <li><a href="#course">最新课程</a></li>
          <li><a href="#app">移动APP</a></li>
          <li><a href="#contact">联系我们</a></li>
        </ul>
    </div>
  </nav>
  <!-- home -->
  <section id="home">
    <div id="lvjing">
      <div class="container">
        <div class="row wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.5s">
          <div class="col-md-1"></div>
          <div class="col-md-10">
            <h1>bootstrap实战课程等你来战</h1>
            <p>本套课程适用于：1.WEB开发人员；2.网站维护人员、管理人员</p>
            <p>培训技能的目标：使用bootstrap框架快速构建响应式网站，颠覆传统WEB前端</p>
            <img src="./images/php.jpg" class="img-responsive">
          </div>
          <div class="col-md-1"></div>
        </div>   
      </div>
    </div>
  </section>
  <!-- 论坛 -->
  <section id="bbs">
    <div class="container">
      <div class="row wow fadeInUp" data-wow-duration="2s">
        <div class="col-md-4">
          <a href="http://www.maiziedu.com" target="_blank">
            <img src="./images/i.png" class="img-responsive" alt="IOS开发">
            <h3>IOS开发</h3>
            <p>iOS开发技术交流，海量iOS实战干货分享</p>
          </a> 
        </div>
        <div class="col-md-4">
          <a href="http://www.maiziedu.com" target="_blank">
            <img src="./images/a.png" class="img-responsive" alt="Android开发">
            <h3>Android开发</h3>
            <p>Android开发技术交流、问题求助、实战案例分享</p>
          </a>
        </div>
        <div class="col-md-4">
          <a href="http://www.maiziedu.com" target="_blank">
            <img src="./images/b.png" class="img-responsive" alt="嵌入式底层开发">
            <h3>嵌入式底层开发</h3>
            <p>底层嵌入式开发、实战案例等技术交流讨论</p>
          </a>
        </div>
      </div>
    </div>
  </section>
  <!-- html5 -->
  <section id="html5">
    <div class="container">
      <div class="row">
        <div class="col-md-6 wow fadeInLeft" data-wow-duration="2s">
          <h2>HTML5前端开发</h2>
          <p>一线资深前端开发工程师倾情打造！助你完成普通程序员到优秀工程师的华丽升级</p>
          <p>
            <span class="glyphicon glyphicon-grain MaiZi-icon" ></span>
            使用HTML5与CSS3技术轻松实现设备自适应展示
          </p>
          <p>
            <span class="glyphicon glyphicon-grain MaiZi-icon" ></span>
            清晰明了的语义代码结构，更高的可读性、更利于页面维护的
          </p>
        </div>
        <div class="col-md-6 wow fadeInRight" data-wow-duration="2s">
          <img src="./images/html5.jpg" class="img-responsive">
        </div>
      </div> 
    </div>    
  </section>
  <!-- bootstrap -->
  <section id="bootstrap">
    <div class="container">
      <div class="row wow fadeInUp" data-wow-duration="2s">
        <div class="col-md-6">
          <img src="./images/Bootstrap.jpg" class="img-responsive">
        </div>
        <div class="col-md-6">
          <h2>bootstrap实战视频教程</h2>
          <p>Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目</p>
          <p>
            <span class="glyphicon glyphicon-grain MaiZi-icon" ></span>
            你的网站和应用能在 Bootstrap 的帮助下通过同一份代码快速、有效适配手机、平板、PC 设备
          </p>
          <p>
            <span class="glyphicon glyphicon-grain MaiZi-icon" ></span>
            Bootstrap 提供了全面、美观的文档。你能在这里找到关于 HTML 元素、HTML 和 CSS 组件、jQuery 插件方面的所有详细文档。、
          </p>
        </div>
      </div> 
    </div>    
  </section>
  <!-- course -->
  <section id="course">
    <div class="container wow fadeIn" data-wow-duration="3s">
      <div class="row" >
        <div class="col-md-12">
          <h2>最新课程</h2>
        </div>
      </div>
      <div class="row">
        <div class="col-md-3">
          <div class="course">
            <img src="./images/swift.jpg" class="img-responsive">
            <a href="http://www.maiziedu.com" target="_blank" 
              class="btn btn-primary" role="button">
              立即学习
            </a>
          </div>
        </div>
        <div class="col-md-3">
          <div class="course">
            <img src="./images/swift.jpg" class="img-responsive">
            <a href="http://www.maiziedu.com" target="_blank"
              class="btn btn-primary" role="button">
              立即学习
            </a>
          </div>
        </div>
        <div class="col-md-3">
          <div class="course">
            <img src="./images/swift.jpg" class="img-responsive">
            <a href="http://www.maiziedu.com" target="_blank"
              class="btn btn-primary" role="button">
              立即学习
            </a>
          </div>
        </div>
        <div class="col-md-3">
          <div class="course">
            <img src="./images/swift.jpg" class="img-responsive">
            <a href="http://www.maiziedu.com" target="_blank"
              class="btn btn-primary" role="button">
              立即学习
            </a>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-3">
          <div class="course">
            <img src="./images/swift.jpg" class="img-responsive">
            <a href="http://www.maiziedu.com" target="_blank" 
              class="btn btn-primary" role="button">
              立即学习
            </a>
          </div>
        </div>
        <div class="col-md-3">
          <div class="course">
            <img src="./images/swift.jpg" class="img-responsive">
            <a href="http://www.maiziedu.com" target="_blank"
              class="btn btn-primary" role="button">
              立即学习
            </a>
          </div>
        </div>
        <div class="col-md-3">
          <div class="course">
            <img src="./images/swift.jpg" class="img-responsive">
            <a href="http://www.maiziedu.com" target="_blank"
              class="btn btn-primary" role="button">
              立即学习
            </a>
          </div>
        </div>
        <div class="col-md-3">
          <div class="course">
            <img src="./images/swift.jpg" class="img-responsive">
            <a href="http://www.maiziedu.com" target="_blank"
              class="btn btn-primary" role="button">
              立即学习
            </a>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- App -->
  <section id="app">
    <div class="container">
      <div class="row wow fadeInUp" data-wow-duration="2s">
        <div class="col-md-6">
          <h2>麦子学院移动APP下载</h2>
          <p>
            全新UI交互，与新网站数据同步，更加丰富的课程，开启精彩无限，语音搜索课程，喊出你想要的课程，一件收藏，方便自己重复学习，离线下载课程，在哪儿都能开！
          </p>
          <button type="button" class="btn btn-primary">
            <span class="glyphicon glyphicon-download-alt">iPhone版</span>
          </button>
          <button type="button" class="btn btn-primary">
            <span class="glyphicon glyphicon-download-alt">Android版</span>
          </button>
        </div>
        <div class="col-md-6">
          <img src="./images/app-banner.jpg" class="img-responsive">
        </div>
      </div>
    </div>
  </section>
  <!-- contact -->
  <section id="contact">
    <div id="lvjing">
      <div class="container">
        <div class="row">
          <div class="col-md-6 wow fadeInLeft" data-wow-duration="2s">
            <h2>
              <span class="glyphicon glyphicon-send"></span>
              &nbsp;
              联系小麦
            </h2>
            <p>
              麦子学院是成都麦子信息技术有限公司旗下一个IT在线教育平台，目前已有30万注册用户，10万以上APP下载量，5000小时视频内容。 我们从不说空话，专注于IT在线教育，脱离传统教育的束缚，让你走哪学哪，想学就学。逗比的老师，贴心的助教，在这儿你能感受到来自五 湖四海伙伴们热情和踏实的学习态度！
            </p>
            <address>
              <p>
                <span class="glyphicon glyphicon-home"></span>
                &nbsp;
                地址:成都市高新区天府软件园D5-11   
              </p>
              <p>
                <span class="glyphicon glyphicon-phone-alt"></span>
                &nbsp;
                联系电话：028-86567913
              </p>
              <p>
                <span class="glyphicon glyphicon-envelope"></span>
                &nbsp;
                邮箱:hr@maiziedu.com  
              </p>
            </address>
          </div>
          <div class="col-md-6 wow fadeInRight" data-wow-duration="2s">
            <form action="#" method="POST">
              <div class="row">
                <div class="col-md-6">
                  <input type="text" class="form-control" placeholder="您的姓名">
                </div>
                <div class="col-md-6">
                  <input type="email" class="form-control" placeholder="您的邮箱">
                </div>
              </div>
              <div class="row">
                <div class="col-md-12">
                  <input type="text" class="form-control" placeholder="标题">
                </div>
              </div>
              <div class="row">
                <div class="col-md-12">
                  <textarea class="form-control" placeholder="留言内容" rows="5"></textarea>
                </div>
              </div>
              <div class="row">
                <div class="col-md-8">
                  <input type="submit" class="form-control" value="提交">
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- footer -->
  <section id="footer">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          Copyright&nbsp;©&nbsp;2016-2019&nbsp;&nbsp;www.maiziedu.com&nbsp;&nbsp;鄂ICP备13014270号-4        
        </div>
      </div>
    </div>
  </section>
  <script src="./lib/jquery/jquery.js"></script>
  <script src="./lib/bootstrap/js/bootstrap.js"></script>
  <!-- 引入导航跳转插件 -->
  <script src="./lib/jquery.singlePageNav.min.js"></script>
  <!-- 引入内容动画插件js -->
  <script src="./lib/wow.min.js"></script>
  <script>
    $(function(){
      // 导航跳转效果插件
      $('nav').singlePageNav({ 
        offset:70 //70为导航条宽度
      });
      // 小屏幕导航点击关闭菜单
      $('.navbar-collapse a').click(function(){
        $('.navbar-collapse').collapse('hide')
      });
      new WOW().init();
    })
  </script>  
</body>
</html>